<template>
  <div>
    <h1>车辆实时轨迹</h1>
    <div id="container"></div>
  </div>
</template>
  
  <script>
import AMapLoader from "@amap/amap-jsapi-loader";
// 设置安全密钥
window._AMapSecurityConfig = {
  securityJsCode: "09a6d09008395dd82d7e9bd783ef0479",
};
export default {
  data() {
    //这里存放数据
    return {
      AMap: null,
      //此处不声明 map 对象，可以直接使用 this.map赋值或者采用非响应式的普通对象来存储。
      map: null,
      mouseTool: null,
      marker: null, // 标记点实例
      carPosition: null,
      form:{
        code:'', // WebSocket的code
        car_num:'',
         
      },
    };
  },

  //方法集合
  methods: {
    initMap() {
      AMapLoader.reset();
      AMapLoader.load({
        key: "a13f2a0c15e7fc108af3a866c14ee5d8", // 申请好的Web端开发者Key，首次调用 load 时必填
        version: "1.4.15", // 指定要加载的 JSAPI 的版本，缺省时默认为 1.4.15
        plugins: ["AMap.Scale", "AMap.HawkEye", "AMap.ToolBar"], // 需要使用的的插件列表，如比例尺'AMap.Scale'等
      }).then((AMap) => {
        this.AMap = AMap;

        this.map = new AMap.Map("container", {
          //设置地图容器id
          viewMode: "2D", //  是否为3D地图模式
          zoom: 12, // 初始化地图级别
          // 中心点
          center: [116.940248, 39.174546], //中心点坐标
          resizeEnable: true,
        });

        this.carMarker = new AMap.Marker({
          map: this.map,
          icon: "http://webapi.amap.com/theme/v1.3/markers/n/mark_b1.png",
          offset: new window.AMap.Pixel(-13, -30), // 调整图标的偏移位置
        });

     
      });
    },

    // 从后台接口获取小车实时位置数据
    getCarPosition() {
       
      let webSocket = new WebSocket("ws://127.0.0.1:12424/ws");
      


      // 模拟数据格式为 [lng, lat]
      const newPosition = [newLng, newLat]; // 获取新的位置，实际应用中可根据需求获取

      // 更新小车位置
      this.carPosition = newPosition;
    },

    updateTrack() {
  // 设置小车标记点位置为最新位置
  this.carMarker.setPosition(this.carPosition);
  // 设置小车标记点的位置样式
  const carMarkerElement = document.querySelector('.car-marker');
  carMarkerElement.style.left = `${this.carPosition[0]}px`;
  carMarkerElement.style.top = `${this.carPosition[1]}px`;
}
  },

  //生命周期
  mounted() {
    this.initMap();

    setInterval(() => {
    
      this.webSocket.send();

    }, 2000); // 每2秒更新一次小车位置
  },
};
</script>
  
  <style scoped>
#container {
  padding: 0px;
  margin: 0px;
  width: 100%;
  height: 800px;
}
</style>
  